<script setup>
import { onMounted,ref } from 'vue';
import moment from 'moment'
import axios from 'axios';
import record from './components/record.vue'
import myComAlert from './components/alert.vue'
const myRecord = ref();
const myAlert = ref();

const toRecord = ()=>{
  myRecord.value.setRecord(true);
}


let myData= ref({
  data:{},
  prize:[{}],
  rule:{}
})
onMounted(async ()=>{
  
  const { data } = await axios.get("/api/gk_get_access_token",{
    params: {
        code:window.code,
        mode:window.mode,
        activity_id:window.activity_id
      }
  });
  myData.value=data.data;
  window.openid=data.data.open_id;
  window.accesstoken=data.data.access_token;
  console.log("data>>",data)
})

const toGetJp = () => {
  if(myData.value.re_num<1){
    alert('无可用次数')
    return;
  }
  myAlert.value.setAlert(true);
  myAlert.value.setPrize(myData.value.prize[0]);
}

</script>

<template>
  <div>
    <div style="height: 90px;" ></div>
    <div class="titlePan" ></div>
    <div class="timePan" >活动时间：{{ moment(myData.data.startTime).format("YYYY-MM-DD") }}至{{ moment(myData.data.endTime).format("YYYY-MM-DD") }}</div>
    <div class="quanPan" >
      <div class="title" >{{ myData.prize[0].info }}</div>
      <div style="height: 40px;" ></div>
      <div class="line" ></div>
      <div style="height: 10px;" ></div>
      <div class="tip" style="overflow:hidden;white-space: nowrap;text-overflow: ellipsis;" >{{ myData.prize[0].rule }}</div>
      <div style="height: 5px;" ></div>
      <div class="tip" style=" overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;" >{{ myData.prize[0].threshold }}</div>
      <div class="quanBtn" @click="toGetJp" ></div>
    </div>
    <div class="lingText" @click="toRecord" >领取记录 &gt;</div>
    <div style="opacity: 0.7;" >
        <div style="padding: 20px;font-size: 12px;line-height: 20px;color: #FFEEB5;font-weight: 500;font-family: PingFang SC-Medium, PingFang SC;">
            欢迎参加我们的优惠活动！在参与之前,请仔细阅读以下规则: <br>
            1. 参与资格<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>本活动仅对在商家消费的个人开放。</li>
            </ul>
            2. 活动时间<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>活动将在指定日期和时间段内开展。请查看活动通知或页面以获取详细信息。</li>
            </ul>
            3. 参与方式<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>本参与者需要按照活动说明进行注册和参与。</li>
                <li>每位参与者只能参与一次。</li>
                <li>参与方式需要根据商家的要求发布抖音视频方可有抽奖。</li>
            </ul>
            4. 优惠券<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>优惠券可能因可获得的数量或类型而有所不同。</li>
                <li>优惠券不可转让、兑换现金或更改。</li>
            </ul>
            5. 公平竞争<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>参与者需遵守公平竞争原则，不得使用不正当手段获得额外机会。</li>
                <li>任何作弊行为将导致取消资格。</li>
            </ul>
            6. 奖品发放<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>奖品将在活动结束后的指定时间内发放。</li>
                <li>获奖者将通过电子邮件或电话通知奖品的领取方式。</li>
            </ul>
            7. 隐私<br>
                <ul style="padding: 0;margin: 0 0 0 20px;">
                    <li>活动期间涉及的个人信息将受到隐私保护政策的保护。</li>
                    <li>我们将严格遵守适用的数据保护法规。</li>
                </ul>
            8. 取消或修改<br>
                    <ul style="padding: 0;margin: 0 0 0 20px;">
                        <li>主办方有权根据需要取消、修改或终止活动，恕不另行通知。</li>
                    </ul>
            9. 免责声明<br>
                        <ul style="padding: 0;margin: 0 0 0 20px;">
                            <li>参与者需明白，参加活动存在一定风险，主办方概不负责参与者的任何损失或伤害。</li>
                        </ul>
            10. 最终决定<br>
                            <ul style="padding: 0;margin: 0 0 0 22px;">
                                <li>主办方对活动的最终解释权归属主办方所有。</li>
                            </ul>
            请在参与活动之前仔细阅读并理解以上规则。如果您不同意这些规则，请不要参加活动。通过参与活动，您表示您已经同意并遵守这些规则。
            如果您有任何疑问或需要进一步的澄清，请随时联系我们的客户支持团队。
        </div>
    </div>
    <record ref="myRecord" ></record>
    <myComAlert ref="myAlert" ></myComAlert>
  </div>
</template>

<style lang="less" scoped>
.titlePan{
    background: url(./assets/quanTitle.png);
    background-size: 308px 57px;
    background-repeat: no-repeat;
    width: 308px;
    height: 57px;
    margin: 0 auto;
}
.timePan{
  padding-top: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 0.7;
  text-align: center;
}
.quanPan{
  background: url(./assets/quan.png);
  background-size: 375px 334px;
  background-repeat: no-repeat;
  width: 375px;
  height: 334px;
  position: relative;
  margin: 0 auto;
  .title {
    padding-top: 47px;
    font-size: 34px;
    color: #BF3100;
    font-weight: bold;
    text-align: center;
    line-height: 75px;
  }
  .line{
    width: 209px;
    height: 1px;
    background: #FFBF7F;
    margin: 0 auto;
  }
  .tip{
    width: 205px;
    color: #BF3100;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.5;
    padding-left: 10px;
    margin: 0 auto;
  }
  .quanBtn{
    position: absolute;
    background: url(./assets/quanLing.png);
    background-size: 245px 49px;
    background-repeat: no-repeat;
    width: 245px;
    height: 49px;
    bottom: -15px;
    left: calc(50% - 125px);
  }
}
.lingText{
  padding-top: 39px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #FFEEB5;
}

</style>
